<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <title>马思特奥赛培训学校网络管理系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/demo.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/ready.css}">
    <script type="text/javascript" th:src="@{/js/Vue.js}"></script>
    <!-- 引入组件库 -->
    <script type="text/javascript" th:src="@{/js/element-ui.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/element-ui.css}"/>

    <style>
        table tr {
            height: 50px;
        }

        table td {
            text-align: center;
            font-size: 16px;
        }

        table th {
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="wrapper" id="app">


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改课程</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-4" style="background-color:white;">
                            </br><strong>课程名称<span style="color: red">*</span></strong><input type="text"
                                                                                              class="form-control"
                                                                                              v-model="subject.projectname"></br>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-4" style="background-color:white;">
                            </br><strong>课程类型</strong>
                            <select v-model="subject.idProjecttype" class="form-control" id="type">
                                <option th:value="${p.id}" th:text="${p.typename}" th:each="p:${projecttypes}"></option>
                            </select></br>
                        </div>
                        <div class="col-md-2"></div>
                    </div>

                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-4" style="background-color:white;">
                            <strong>课程来源</strong>
                            <select v-model="subject.idProjectsource" class="form-control" id="sources">
                                <option th:value="${p.id}" th:text="${p.sourcename}"
                                        th:each="p:${projectsources}"></option>
                            </select></br>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-4" style="background-color:white;">
                            <strong>面向班级</strong>(可多选)<br>
                            <!--                                    <select class="form-control" multiple id="s1">-->
                            <!--                                        <option th:value="${s.specialtyName}" th:text="${s.specialtyName}" th:each="s: ${specialties}"></option>-->
                            <!--                                    </select></br>-->

                            <el-select multiple v-model="marchspecialty">
                                <el-option v-for="(specialty,index) in specialtys" :key="index"
                                           :label="specialty.specialtyName"
                                           :value="specialty.specialtyName">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="col-md-2"></div>
                    </div>

                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-4" style="background-color:white;">
                            <strong>第一指导老师</strong><input v-model="teacherName" type="text" class="form-control"
                                                          id="teacher1"
                                                          th:value="${session.teacherInfo.name}"
                                                          readonly="readonly"></br>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-4" style="background-color:white;">
                            <strong>第二指导老师</strong><input v-model="subject.teachernames" type="text"
                                                          class="form-control" id="teacher2"></br>
                        </div>
                        <div class="col-md-2"></div>
                    </div>

                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-4" style="background-color:white;"><h6><font
                                color="red">请上传课程附件</font></h6>
                            <form id="ss">
                                <input type="file" name="file" id="file">
                            </form>
                        </div>
                        <div class="col-md-4" style="background-color:white;"></div>
                        <div class="col-md-2"></div>
                    </div>

                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-4" style="background-color:white;"></div>
                        <div class="col-md-4" style="background-color:white;">
                            {{subject.filepath}}
                            <a :href="url+'/static/file_download?project_id='+subject.id">下载附件</a>
                        </div>
                        <div class="col-md-2"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="Update">保存更改</button>
                    <P></P>
                    <p><font color="red">保存更改后将重新提交</font></p>
                </div>

            </div>
        </div>
    </div>

    <!--    引入公共页面 public-index。html 的模块-->
    <div th:replace="teacher/public-teacher-index :: header"></div>
    <div th:replace="teacher/public-teacher-index :: left"></div>


    <div class="main-panel">
        <div class="content">
            <div class="row">
                <!--<div class="col-md-1"></div>-->
                <div class="col-md-12">
                    <div class="card" style="width:100%;height:100%;">
                        <div class="card-header text-center">
                            <h4>

                            </h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!--<div class="col-md-1"></div>-->
                                <div class="col-md-12">
                                    <a th:href="@{/teacher/cxallProject}" style="font-size:15px;">查看教室所有课程</a>
                                    <table class="table table-hover" style="background-color:white;">
                                        <thead>
                                        <tr style="background-color:#00ffff">
                                            <th>序号</th>
                                            <th>课程名称</th>
                                            <th>课程类型</th>
                                            <th>课程来源</th>
                                            <th>面向班级</th>
                                            <th>指导老师</th>
                                            <th>当前状态</th>
                                            <th></th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="m, userStat:${Myproject}">
                                            <th th:text="${userStat.count}"></th>
                                            <th th:text="${m.projectname}"></th>
                                            <th th:text="${m.sourceName}"></th>
                                            <th th:text="${m.typeName}"></th>
                                            <th th:text="${m.marchspecialty}"></th>
                                            <th th:text="${m.teachernames}"></th>
                                            <th th:text="${m.projectZT}"></th>
                                            <th style="width:110px">
                                                <button type="button" class="btn btn-info btn-xs"
                                                        th:onclick="|fun(this, ${m.id})|"
                                                        th:if="${m.verifyprojectFlag==2&&m.releaseFlag==0}">发布
                                                </button>
                                                <button type="button" class="btn btn-info btn-xs"
                                                        th:onclick="|fun(this,${m.id})|"
                                                        th:if="${m.verifyprojectFlag==2&&m.releaseFlag==1}">取消发布
                                                </button>
                                                <button type="button" class="btn btn-info btn-xs" disabled="disabled"
                                                        th:unless="${m.verifyprojectFlag==2&&m.releaseFlag==0||m.verifyprojectFlag==2&&m.releaseFlag==1}">
                                                    不可发布
                                                </button>
                                            </th>
                                            <th th:if="${m.verifyprojectFlag==1 || m.verifyprojectFlag==0}">
                                                <button class="btn btn-xs btn-danger" @click="delSubject($event)"
                                                        id="delete" th:value="${m.id}">删除
                                                </button>
                                                <!-- Button trigger modal -->
                                                <button type="button" th:value="${m.id}" @click="openUpdate($event)"
                                                        class="btn btn-xs btn-success" data-toggle="modal"
                                                        data-target="#myModal">
                                                    修改
                                                </button>
                                            </th>


                                        </tr>
                                        </tbody>

                                    </table>
                                </div>
                                <div class="col-md-1"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script type="text/javascript" th:src="@{/webjars/jquery/1.9.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/js/ready.min.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.js}"></script>

<script th:inline="javascript">

    var basePath = /*[[${#httpServletRequest.getContextPath()}]]*/'ContextPath';

    function fun(ojb, projectid) {
        var a = $("button").index(ojb);
        var b = $("button").eq(a);
        var c = $("table").find("tr").eq(a).find("th").eq(1).html();
        var fb;
        if ($.trim($(b).html()) === "发布") {
            fb = 1;
        } else {
            fb = 0;
        }

        if (fb == 0) {
            if (confirm("若取消发布，会清除该课程下所有选报学生。请教师自行通知学生重新选课，是否取消发布？")) {
                $.ajax({
                    url: 'fb_project',
                    type: 'POST',
                    data: {'project_id': projectid, 'pd': fb},
                    async: false,
                    contentType: 'application/x-www-form-urlencoded',
                    dataType: 'json',
                    success: function (PD) {
                        if ($.trim($(b).html()) === "发布") {
                            $(b).text("取消发布");
                        } else {
                            $(b).text("发布");
                        }
                    },
                    error: function () {
                        alert("上传失败！");
                    }
                })
            }
        } else {
            $.ajax({
                url: 'fb_project',
                type: 'POST',
                data: {'project_id': projectid, 'pd': fb},
                async: false,
                contentType: 'application/x-www-form-urlencoded',
                dataType: 'json',
                success: function (PD) {
                    if ($.trim($(b).html()) === "发布") {
                        $(b).text("取消发布");
                    } else {
                        $(b).text("发布");
                    }
                },
                error: function () {
                    alert("上传失败！");
                }
            })
        }


    }

    var app = new Vue({
        el: "#app",
        data() {
            return {
                url: basePath,
                specialtys:/*[[${specialties}]]*/'',
                marchspecialty: [],
                subject: {},
                file: {},
                teacherName:/*[[${session.teacherInfo.name}]]*/'',
            }
        },
        methods: {
            openUpdate(event) {
                console.log(event);
                axios.get("getSubjectById?id=" + event.target.value).then((data) => {
                    this.subject = data.data.extend.subject;
                    this.marchspecialty = this.subject.marchspecialty = this.subject.marchspecialty.split(",");
                    console.log("this.subject.marchspecialty::", this.subject.marchspecialty);
                });

            },
            Update() {
                this.subject.marchspecialty = JSON.parse(JSON.stringify(this.marchspecialty)) + "";
                console.log("subjects::", this.subject);

                var formdata = new FormData(document.getElementById("ss"));
                formdata.append("id", this.subject.id);
                formdata.append("projectName", this.subject.projectname);
                formdata.append("idProjecttype", this.subject.idProjecttype);
                formdata.append("idProjectsource", this.subject.idProjectsource);
                formdata.append("marchspecialty", this.subject.marchspecialty);
                formdata.append("teachernames", this.subject.teachernames);
                axios.post('updateSubject', formdata).then((data) => {
                    console.log("fileReturn:", data);
                    if (data.status == 200) {
                        alert("修改成功");
                        window.location.reload();
                    } else {
                        alert("修改失败");
                    }
                });
            },
            download(id) {
                axios.get(basePath + "/static/file_download?project_id=" + this.subject.id).then((data) => {
                    console.log(data);
                });
            },
            delSubject(event) {
                let id = event.target.value;
                if (confirm("确认删除课程吗 ？")) {
                    $.ajax({
                        url: "del_project?id=" + id,
                        type: "post",
                        async: false,
                        success: function (result) {
                            window.location.reload()
                        },
                        error: function () {
                            alert("删除失败")
                        }
                    });
                }
            }
        }
    });

</script>
</html>